<template>
  <div class="home-echars-contain">
    <div id="wayEchars" class="home-echars" />
  </div>
</template>

<script>
import { WayData, group, linesConfig } from '@/api/work/home'
export default {
  name: 'MuchNode',
  data() {
    return {
      // 指定图表的配置项和数据
      dataArr: [],
      allArr: [],
      erArr: [],
      sanArr: []
    }
  },
  mounted() {
    this.getWayEchars()
  },
  methods: {
    /** 多节点分布拓扑图 */
    getWayEchars() {
      // 基于准备好的dom，初始化echarts实例  这个和上面的id对应
      var myChart = this.$echarts.init(document.getElementById('wayEchars'))

      let items = WayData
      // 点
      items.forEach((el, ind) => {
        if (el.pointType === 'cloud') {
          // 云
          el.symbol =
            'image://'
          el.symbolSize = [56, 35]
          el.label = {
            normal: {
              show: true,
              position: 'bottom',
              borderWidth: 1,
              borderRadius: 12,
              padding: [5, 10],
              distance: 10,
              color: '#5D77FE',
              borderColor: '#5D77FE',
              backgroundColor: 'rgba(93, 119, 254, 0.2)'
            }
          }
          this.erArr.push(el)
        } else if (el.pointType === 'point') {
          // 球
          el.itemStyle = {
            borderColor: '#5D77FE',
            borderWidth: 3,
            color: '#5D77FE'
          }
          // 清除没有父节点的值
          if (el.belong && !items.some((iteP) => el.belong === iteP.name)) {
            items.splice(ind, 1)
          } else {
            this.sanArr.push(el)
          }
        }
        if (!el.belong) {
          el.children = []
          items.forEach((es) => {
            if (es.belong === el.name) {
              el.children.push(es)
            }
          })
          this.allArr.push(el)
        }
      })

      // 点分布
      this.erArr = group(this.erArr, this.erArr, 25)
      this.sanArr = group(this.erArr, this.sanArr, 50)
      this.allArr = [...this.erArr, ...this.sanArr]

      // 线坐标和配置
      this.dataArr = linesConfig(this.allArr)
      let option = {
        xAxis: {
          show: false,
          type: 'value',
          max: 50,
          min: -51
        },
        grid: {
          top: 120,
          bottom: 100,
          left: 130,
          right: 130
        },
        yAxis: {
          show: false,
          type: 'value',
          max: 50,
          min: -50
        },
        series: [
          {
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            z: 3,
            itemStyle: {
              normal: {
                shadowColor: 'none'
              }
            },
            data: this.allArr
          },
          {
            name: '',
            type: 'lines',
            coordinateSystem: 'cartesian2d',
            polyline: true,
            z: 1,
            lineStyle: {
              width: 2,
              color: '#5D77FE',
              curveness: 0
            },
            effect: {
              show: true,
              smooth: false,
              trailLength: 0, // 拖尾的长度
              symbol: 'pin' // 动画的类型
            },
            data: this.dataArr
          }
        ]
      }

      myChart.setOption(option)
    }
  }
}
</script>

<style scoped>
.home-echars-contain {
  width: 100%;
  height: 450px;
}
.home-echars {
  width: 100%;
  height: 450px;
}
</style>
